<template>
	<view class="page">
		<navigation-bar-com background-color="transparent"></navigation-bar-com>
		<!-- 	<view class="mine-header">
			<view class="self-head">
				<view class="mine-avatar">
					<image class="avatar"></image>
				</view>
				<view class="mine-nickname">{{name}}</view>
				<u-button :customStyle="{margin: '0', width: '90px'}" size="small">
					<u-icon color="#909193" name="edit-pen"></u-icon>
					<text style="color: #909193;">编辑资料</text>
				</u-button>
			</view>
			<u-gap height="32rpx" bgColor="transparent"></u-gap>
			<view class="self-introduction clamp-line-2">简介: 主治医师，学士学位，毕业于郑州大学临床医学系。从事妇科工作十余年，曾在郑大一附院深造附院深造。</view>
		</view> -->
		<u-gap height="32rpx" bgColor="transparent"></u-gap>
		<!-- 	<view class="card-container">
			<u-cell-group :border="false">
				<u-cell title="关于我们" icon="info-circle-fill" isLink></u-cell>
				<u-cell title="隐私协议" icon="file-text-fill" isLink></u-cell>
				<u-cell title="用户协议" icon="grid-fill" isLink :border="false"></u-cell>
			</u-cell-group>
		</view> -->
		<u-gap height="32rpx" bgColor="transparent"></u-gap>
		<view class="card-container">
			<u-cell-group :border="false">
				<u-cell title="修改密码" icon="lock-fill" isLink @click="popShow=true;"></u-cell>
				<u-cell title="退出登录" icon="grid-fill" isLink :border="false" @click="logout"></u-cell>
			</u-cell-group>
		</view>
		<!-- 修改密码弹出框 -->
		<u-popup mode="bottom" round="20rpx" :show="popShow" @close="popShow=false">
			<view class="passwordPop">
				<view class="formBox">
					<u--form style="padding: 20px;" labelPosition="left" labelWidth='90px' :model="form" :rules="rules"
						ref="uForm">
						<u-form-item label="旧密码" prop="oldPassword" borderBottom required>
							<u--input v-model="form.oldPassword" :type="oldPasswordShow?'password':'text'"
								placeholder="请输入旧密码" border="none"></u--input>
							<u-icon v-show="!oldPasswordShow" slot="right" name="eye-fill"
								@click="oldPasswordShow=!oldPasswordShow"></u-icon>
							<u-icon v-show="oldPasswordShow" slot="right" name="eye-off"
								@click="oldPasswordShow=!oldPasswordShow"></u-icon>
						</u-form-item>
						<u-form-item label="新密码" prop="newPassword" borderBottom required>
							<u--input v-model="form.newPassword" :type="newPasswordShow?'password':'text'"
								placeholder="请输入新密码" border="none"></u--input>
							<u-icon v-show="!newPasswordShow" slot="right" name="eye-fill"
								@click="newPasswordShow=!newPasswordShow"></u-icon>
							<u-icon v-show="newPasswordShow" slot="right" name="eye-off"
								@click="newPasswordShow=!newPasswordShow"></u-icon>
						</u-form-item>
						<u-form-item label="确认密码" prop="newPasswordAgain" borderBottom required>
							<u--input v-model="form.newPasswordAgain" :type="newPasswordAgainShow?'password':'text'"
								placeholder="请再次输入新密码" border="none"></u--input>
							<u-icon v-show="!newPasswordAgainShow" slot="right" name="eye-fill"
								@click="newPasswordAgainShow=!newPasswordAgainShow"></u-icon>
							<u-icon v-show="newPasswordAgainShow" slot="right" name="eye-off"
								@click="newPasswordAgainShow=!newPasswordAgainShow"></u-icon>
						</u-form-item>
					</u--form>
				</view>
				<view class="popButton">
					<u-button type="primary" text="确认" shape="circle" @click="revise"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		logoutApi,
		updatePassword
	} from '@/common/api/mine/mine.js';
	const app = getApp()
	export default {
		data() {
			return {
				name: uni.getStorageSync('doctorName'),
				oldPasswordShow: true,
				newPasswordShow: true,
				newPasswordAgainShow: true,
				popShow: false,
				form: {
					oldPassword: '',
					newPassword: '',
					newPasswordAgain: '',
				},
				rules: {
					oldPassword: [
						// 必填规则
						{
							required: true,
							message: '此为必填字段',
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},

					],
					newPassword: [
						// 必填规则
						{
							required: true,
							message: '此为必填字段',
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},
						// 6-8个字符之间的判断
						{
							min: 6,
							message: '长度至少6个字符',
							trigger: 'blur',
						},
					],
					newPasswordAgain: [
						// 必填规则
						{
							required: true,
							message: '此为必填字段',
							// blur和change事件触发检验
							trigger: ['blur', 'change'],
						},
						// 6-8个字符之间的判断
						{
							min: 6,
							message: '长度至少6个字符',
							trigger: 'blur',
						},
						// 自定义规则判断两次密码是否一致
						{
							validator: (rule, value, callback) => {
								if (value !== this.newPassword) {
									callback(new Error('两次密码不一致'));
								}
							},
							trigger: 'blur'
						},
					]
				}
			}
		},
		methods: {
			// 清楚数据并调转登录页
			cleatData() {
				uni.clearStorageSync();
				// 退出时关闭心跳检测
				app.globalData.meetingWebSocket.close()
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			// 退出
			logout() {
				logoutApi().then(res => {
					if (res.code === 1) {
						this.cleatData()
					}
				})

			},
			// 修改密码
			revise() {
				updatePassword(this.form).then(res => {
					console.log('res', res)
					if (res.code === 1) {
						this.popShow = false
						this.cleatData()
					}

				})
			},
			passwordShow(val) {
				if (val === 'old') {
					this.oldPasswordShow = !this.oldPasswordShow

				} else if (val === 'newAgain') {

				} else {

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card-container {
		padding: 20rpx;
		margin: 0 auto;
		width: 686rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background-color: #fff;
	}

	.mine-header {
		position: relative;
		margin: 0 auto;
		padding: 32rpx;
		width: 686rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 20rpx;

		.self-head {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.mine-avatar {
				position: absolute;
				top: 0px;
				left: 32rpx;
				width: 60px;
				height: 60px;

				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					border: 2px solid #ffffff;
					background-color: $bg-color;
				}
			}

			.mine-nickname {
				margin: 0 0 0 calc(60px + 30rpx);
				font-size: $ft-size-lg;
				font-weight: bold;
				color: $text-main-color;
			}
		}

		.self-introduction,
		.self-goodat {
			font-size: $ft-size-base;
			color: $text-desc-color
		}
	}

	.passwordPop {
		height: 750rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		background-color: #f3f4f6;

		.formBox {
			width: 90%;
			background-color: #fff;
			border-radius: 20px;
		}

		.popButton {
			width: 500rpx;
			margin: 20rpx auto;
		}
	}
</style>